Links 1 through 10 of 19 by J. Albert Bowden II tagged {float:}

Directionality

• {float:}

• {float:}
• csslayout
• ui
• designpatterns

Stacking and float

For floating blocks the stacking order is a bit different. Floating blocks are placed between non-positioned blocks and positioned blocks:

1. Background and borders of the root element
2. Descendant blocks in the normal flow, in order of appearance (in HTML)
3. Floating blocks
4. Descendant positioned elements, in order of appearance (in HTML)

Actually, as you can see in the following example, the background and border of the non-positioned block (DIV #4) is completely unaffected by floating blocks, while the content is affected. This happens according to CSS standard float behaviour.

This behaviour can be explained with an improved version of the previous ordered list:

1. Background and borders of the root element
2. Descendant blocks in the normal flow, in order of appearance (in HTML)
3. Floating blocks
4. Inline descendants in the normal flow
5. Descendant positioned elements, in order of appearance (in HTML)

• {float:}
• {z-index:}

• cssadvanced
• {float:}
• clearfix

• {float:}

• {position:}
• {float:}
• iebug

• css
• {float:}

• {float:}

• {float:}

• csslayout
• {z-index:}
• {position:}
• {float:}
• {clear:}
• {top:}
• {left:}